<script setup>
import { getLogListApi, getLogByIdApi } from '@/apis/log'
import { ref } from 'vue'
const emit = defineEmits(['title'])
emit('title', '操作日志')
const params = ref({
  pageNo: 1,
  pageSize: 10
})
const logList = ref([])
const total = ref(0)
const columns = [
  {
    prop: '',
    type: 'selection'
  },
  {
    prop: '',
    type: 'index',
    label: '序号',
    width: 80
  },
  {
    prop: 'title',
    label: '系统模块',
    type: 'text'
  },
  {
    prop: 'businessType',
    label: '操作类型',
    type: 'enum',
    enum: [
      {
        value: 0,
        label: '其他',
        color: '#909399'
      },
      {
        value: 1,
        label: '添加',
        color: '#67C23A'
      },
      {
        value: 2,
        label: '修改',
        color: '#E6A23C'
      },
      {
        value: 3,
        label: '删除',
        color: '#F56C6C'
      }
    ]
  },
  {
    prop: 'operName',
    label: '操作人员',

    type: 'text'
  },
  {
    prop: 'operLocation',
    label: '操作地点',

    type: 'text'
  },

  {
    prop: 'status',
    label: '操作状态',
    type: 'enum',

    enum: [
      {
        value: 0,
        label: '成功'
      },
      {
        value: 1,
        label: '失败'
      }
    ]
  },
  {
    prop: 'operTime',
    label: '操作日期',
    type: 'date'
  },
  {
    prop: '',
    type: 'operate',
    label: '操作'
  }
]
// 详情弹层
const dialogVisible = ref(false)
const getLogList = async () => {
  const res = await getLogListApi(params.value)
  logList.value = res.data.data.list
  total.value = res.data.data.total
}
getLogList()

const ids = ref([])
// 多选删除
const handleSelectionChange = (e) => {
  ids.value = e
}
// 查询详情
const logDetails = ref({})

const getDetails = async (id) => {
  const res = await getLogByIdApi(id)
  logDetails.value = res.data.data
  dialogVisible.value = true
}

// 切换页码
const currentChange = (e) => {
  params.value.pageNo = e
  getLogList()
}

// 切换页大小
const sizeChange = (e) => {
  params.value.pageNo = 1
  params.value.pageSize = e
  getLogList()
}
</script>

<template>
  <div class="page">
    <TabComponent
      :tableData="logList"
      :columns="columns"
      @selectionChange="handleSelectionChange"
      :height="440"
    >
      <template #header>
        <!--  <div class="search-box">
          <el-form :inline="true" :model="params" class="search-form">
            <el-form-item label="用户名">
              <el-input
                style="width: 13rem"
                v-model="params.username"
                placeholder="请输入用户名"
                clearable
              />
            </el-form-item>

            <el-form-item label="性别">
              <el-select
                v-model="params.gender"
                placeholder="请选择性别"
                style="width: 10rem"
                clearable
              >
                <el-option label="男" :value="1" />
                <el-option label="女" :value="2" />
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select
                v-model="params.locked"
                placeholder="请选择状态"
                style="width: 10rem"
                clearable
              >
                <el-option label="正常" :value="0" />
                <el-option label="锁定" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" :icon="Search"
                >搜索</el-button
              >
              <el-button type="default" @click="onReset" :icon="RefreshRight"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-button type="primary" :icon="Plus" @click="open(null)"
            >新增</el-button
          >
          <el-button type="danger" :icon="Delete" @click="onDelete(null)"
            >批量删除</el-button
          >
        </div> -->
      </template>
      <template #operate="{ row }">
        <el-button type="primary" link @click="getDetails(row.operId)"
          >查询详情</el-button
        >
      </template>

      <template #pagination>
        <el-pagination
          background
          layout="sizes,prev, pager, next,total"
          :total="total"
          :page-sizes="[10, 15, 20]"
          v-model:page-size="params.pageSize"
          v-model:current-page="params.pageNo"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </template>
    </TabComponent>

    <!-- 弹层 -->
    <div>
      <el-dialog v-model="dialogVisible" title="操作日志详情" width="900">
        <div class="content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="操作模块">{{
              logDetails.title
            }}</el-descriptions-item>
            <el-descriptions-item label="请求地址">{{
              logDetails.operUrl
            }}</el-descriptions-item>
            <el-descriptions-item label="登录信息">{{
              `${logDetails.operName} / ${logDetails.operIp} / ${logDetails.operLocation}`
            }}</el-descriptions-item>
            <el-descriptions-item label="请求方式">{{
              logDetails.requestMethod
            }}</el-descriptions-item>
            <el-descriptions-item label="操作方法">{{
              logDetails.method
            }}</el-descriptions-item>
            <el-descriptions-item label="操作状态">
              <el-tag v-if="logDetails.status === 0" type="success"
                >成功</el-tag
              >
              <el-tag v-else type="danger">失败</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="消耗时间">{{
              logDetails.costTime
            }}</el-descriptions-item>
            <el-descriptions-item label="操作时间">{{
              logDetails.operTime
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
